<template>
  <div>
    <div>
      <div class="top">
        <el-button size="mini" type="primary" plain @click="addOrange()">新增组织机构</el-button>
        <el-button size="mini" type="primary" plain @click="editOrange()">编辑组织机构</el-button>
        <el-button size="mini" type="primary" plain @click="deleteOrange()">删除组织机构</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button size="mini" type="primary" plain @click="addUser()">新增用户</el-button>
        <el-button size="mini" type="primary" plain @click="editUser()">编辑用户</el-button>
        <el-button size="mini" type="primary" plain @click="deleteUser()">删除用户</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button size="mini" type="primary" plain @click="editPassword()">修改用户密码</el-button>
        <div class="top-check">
          <el-form :inline="true" :model="checkForm" size="mini">
            <el-form-item label="登录名">
              <el-input v-model="checkForm.username"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="checkForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="checkForm.sex" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="CheckSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="CheckClear">清空查询条件</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="left tabbox">
        <!-- 树形表格 -->
        <treeTable
          v-if="treeTableApp.hackReset"
          :tableData="treeTableApp.orangelist.treelist"
          table_height="690"
          :firstColumn="treeTableApp.firstColumn"
          @rowclick="Orange_rowClick"
        >
          <el-table-column prop="code" label="编码" width="150"></el-table-column>
          <el-table-column prop="usernum" label="用户数" width="50"></el-table-column>
        </treeTable>
      </div>
      <div class="right tabbox">
        <!-- 用户列表 -->
        <el-table
          border
          :data="userTableApp.list.userlist"
          :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
          tooltip-effect="light"
          highlight-current-row
          :stripe="true"
          :row-style="{height:'5px'}"
          :cell-style="{padding:'5px 0'}"
          @row-click="User_rowClick"
          style="width: 100%"
          height="690"
        >
          <el-table-column  label="序号" width="50">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column  prop="username" label="登录名" width="150"></el-table-column>
          <el-table-column show-overflow-tooltip prop="name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="sex" label="性别" width="80"></el-table-column>
          <el-table-column show-overflow-tooltip prop="cardId" label="身份证号" width="180"></el-table-column>
          <el-table-column show-overflow-tooltip prop="id" label="编码" width="130"></el-table-column>
          <el-table-column label="入职日期" width="110">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="phone" label="联系电话" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="phone2" label="备用联系电话" width="120"></el-table-column>
          <el-table-column prop="address" label="现住地址" width="300" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <div class="clear"></div>
      <addOrangeDialog
        v-if="dialog.add_orange"
        :form="treeTableApp.tempRow"
        :list="treeTableApp.orangelist"
        @dialog-close="dialog.add_orange=false"
        @refresh="Refresh"
      ></addOrangeDialog>
      <deleteOrangeDialog
        v-if="dialog.delete_orange"
        :form="treeTableApp.tempRow"
        @dialog-close="dialog.delete_orange=false"
        @refresh="Refresh"
      ></deleteOrangeDialog>
      <editOrangeDialog
        :form="treeTableApp.tempRow"
        v-if="dialog.edit_orange"
        @refresh="Refresh"
        @dialog-close="dialog.edit_orange=false"
      ></editOrangeDialog>
      <deleteUserDialog
        :form="userTableApp.tempRow"
        v-if="dialog.delete_user"
        @refresh="RefreshUser(treeTableApp.SelectRow.id)"
        @dialog-close="dialog.delete_user=false"
      ></deleteUserDialog>
      <addUserDialog
        :form="userTableApp.tempRow"
        v-if="dialog.add_user"
        @refresh="RefreshUser(treeTableApp.SelectRow.id)"
        @dialog-close="dialog.add_user=false"
      ></addUserDialog>
      <editUserDialog
        :form="userTableApp.tempRow"
        v-if="dialog.edit_user"
        @refresh="RefreshUser(treeTableApp.SelectRow.id)"
        @dialog-close="dialog.edit_user=false"
      ></editUserDialog>
      <pwUserDialog
        :form="userTableApp.tempRow"
        v-if="dialog.password_user"
        @dialog-close="dialog.password_user=false"
      ></pwUserDialog>
    </div>
  </div>
</template>
<script>
import treeTable from "../multiplexing/treetable";
import addOrangeDialog from "./user_dialog/orangedialog/add";
import deleteOrangeDialog from "./user_dialog/orangedialog/delete";
import editOrangeDialog from "./user_dialog/orangedialog/edit";
import deleteUserDialog from "./user_dialog/userdialog/delete";
import addUserDialog from "./user_dialog/userdialog/add";
import editUserDialog from "./user_dialog/userdialog/edit";
import pwUserDialog from "./user_dialog/userdialog/password";
export default {
  components: {
    treeTable,
    addOrangeDialog,
    deleteOrangeDialog,
    editOrangeDialog,
    deleteUserDialog,
    addUserDialog,
    editUserDialog,
    pwUserDialog
  },
  data() {
    return {
      dialog: {
        add_orange: false,
        edit_orange: false,
        delete_orange: false,
        add_user: false,
        edit_user: false,
        delete_user: false,
        password_user:false,
      },
      checkForm: {
        username: "",
        name: "",
        sex: ""
      },
      treeTableApp: {
        hackReset: false, //属性表格的v-if，用于数据接受完后开始渲染
        //第一列属性
        firstColumn: {
          name: "机构组织名",
          prop: "name",
          width: "300"
        },
        //树型表格，之所以设置为对象，是为了更方便拷贝数组避免复制引用
        orangelist: {
          treelist: []
        },
        SelectRow: {},
        tempRow: {} //隔离对象，用于传递
      },
      userTableApp: {
        list: {
          userlist: []
        },
        SelectRow: {},
        tempRow: {} //隔离对象，用于传递
      }
    };
  },
  methods: {
    newMethod() {},
    RefreshUser(orange_id) {
      this.$http
        .post("/user/getuserlist", { orangeid: orange_id })
        .then(response => {
          this.userTableApp.list.userlist = response.data;
        });
    },
    Refresh() {
      this.treeTableApp.hackReset = false;
      this.$http.get("orangetree/list").then(response => {
        this.treeTableApp.orangelist.treelist = response.data;
        this.$nextTick(() => {
          this.treeTableApp.hackReset = true;
        });
      });
      // this.RefreshUser(1);
    },
    Orange_rowClick(orangeObj) {
      this.userTableApp.SelectRow = {};
      window.console.log(orangeObj);
      //刷新用户列表
      this.RefreshUser(orangeObj.id);
      //存放选择信息
      this.treeTableApp.SelectRow = JSON.parse(JSON.stringify(orangeObj));
    },
    User_rowClick(User) {
      window.console.log(User);
      this.userTableApp.SelectRow = JSON.parse(JSON.stringify(User));
    },
    CheckOrangeisSeleced() {
      let checkname = this.treeTableApp.SelectRow.name;
      if (checkname == null || checkname == "") {
        this.$message.error("请选择一个机构！");
        return;
      }
      return true;
    },
    CheckUserisSeleced() {
      let checkname = this.userTableApp.SelectRow.username;
      if (checkname == null || checkname == "") {
        this.$message.error("请选择一个用户！");
        return;
      }
      return true;
    },
    RefreshTempRow() {
      this.treeTableApp.tempRow = JSON.parse(
        JSON.stringify(this.treeTableApp.SelectRow)
      );
      this.userTableApp.tempRow = JSON.parse(
        JSON.stringify(this.userTableApp.SelectRow)
      );
    },
    addOrange() {
      this.RefreshTempRow();
      this.dialog.add_orange = true;
    },

    editOrange() {
      this.RefreshTempRow();
      if (this.CheckOrangeisSeleced()) {
        this.dialog.edit_orange = true;
      }
    },
    deleteOrange() {
      this.RefreshTempRow();
      if (this.CheckOrangeisSeleced()) {
        this.dialog.delete_orange = true;
      }
    },
    addUser(){
      this.RefreshTempRow();
      this.dialog.add_user = true;
    },
    editUser() {
      this.RefreshTempRow();
      if (this.CheckUserisSeleced()) {
        this.dialog.edit_user = true;
      }
    },
    deleteUser() {
      this.RefreshTempRow();
      if (this.CheckUserisSeleced()) {
        this.dialog.delete_user = true;
      }
    },
    editPassword() {
      this.RefreshTempRow();
      if (this.CheckUserisSeleced()) {
        this.dialog.password_user = true;
      }
    },

    CheckClear() {
      this.checkForm = {
        username: "",
        name: "",
        status: "all"
      };
    },
    CheckSubmit() {
      this.$http.post("user/search",this.checkForm).then(response =>{
        this.userTableApp.list.userlist = response.data
      })
    }
  },
  created() {
    this.$http.get("orangetree/list").then(response => {
      this.treeTableApp.orangelist.treelist = response.data;
      this.$nextTick(() => {
        this.treeTableApp.hackReset = true;
      });
    });
    this.RefreshUser(1);
  }
};
</script>
<style scoped>
.left {
  height: 695px;
  width: 500px;
  /* background-color: red; */
  float: left;
  clear: right;
  margin-right: 15px;
}
.right {
  height: 695px;
  width: 1280px;
  float: left;
}
</style>